<template>
    <div class="local-radio" :class="{disabled}" @click="changeStatus">
        <i v-if="isChecked" class="icon-radio-checked-circular"></i>
        <i v-else class="icon-radio-uncheck-circular"></i>
    </div>
</template>


<script>
export default {
    data() {
        return {
            isChecked: false
        }
    },

    props: {
        value: {
            type: Boolean,
            default: false
        },
        syncFun: {
            type: [Function, Boolean],
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        readonly: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        value(val) {
            this.isChecked = val
        },
        isChecked(val) {
            this.$emit('input', val)
        }
    },
    mounted() {
        this.isChecked = !!this.value
    },
    methods: {
        changeStatus() {
            if(this.readonly || this.disabled) return;
            if(this.syncFun && typeof this.syncFun == 'function') {
                this.syncFun((checked) => {
                    if(typeof checked == 'boolean') {
                        this.isChecked = checked
                    } else {
                        this.isChecked = !this.isChecked
                    }
                    this.$emit('change', this.isChecked)
                })
            } else {
                this.isChecked = !this.isChecked
                this.$emit('change', this.isChecked)
            }
        }

    },

}
</script>

<style lang="scss" scoped>
.icon-radio-checked-circular{
    color: #1890ff;
}
    .disabled{
        i{
            color: #999!important;
        }
    }
</style>
